<template>
<div>
    <el-row :gutter="20">
        <el-col :span="4">
            <el-row style="margin-bottom: 20px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>热门文章</span>
                        <el-button style="margin-left: 50px" icon="el-icon-refresh" size="mini" circle @click="getHotArticle"></el-button>
                    </div>
                    <div v-for="hotBlog in hotBlogs" :key="hotBlog.articleId" class="text item">
                        <el-link style="font-size: 10px;" icon="el-icon-star-off" :underline="false" @click="toBlogDetailInfo(hotBlog.articleId)">{{hotBlog.articleTitle}}    <div class="el-icon-timer">{{hotBlog.articleDate}}</div></el-link>
                    </div>
                </el-card>
            </el-row>
            <el-row>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>友情链接</span>
                    </div>
                    <el-link style="margin-right: 10px;margin-top: 10px" href="https://www.csdn.net/" target="_blank"><el-tag>CSDN</el-tag></el-link>
                    <el-link style="margin-right: 10px;margin-top: 10px" href="https://element.eleme.cn/" target="_blank"><el-tag>Element-Ui</el-tag></el-link>
                    <el-link style="margin-right: 10px;margin-top: 10px" href="https://gitee.com/" target="_blank"><el-tag>Gitee</el-tag></el-link>
                    <el-link style="margin-right: 10px;margin-top: 10px" href="https://www.aliyun.com/activity/daily/specialoffer" target="_blank"><el-tag>阿里云特卖</el-tag></el-link>
                </el-card>
            </el-row>

        </el-col>
        <el-col :span="12">
            <div id="myExam">
<!--                <div class="title">生态圈社区</div>-->
                <div class="wrapper">
                    <ul class="top" style="margin-top: 0">
                        <li class="order">
                            <el-select v-model="blogRequest.sort" placeholder="请选择分区">
                            <el-option
                                    @click.native="changeSortValue"
                                    v-for="item in sortOptions"
                                    :key="item.label"
                                    :label="item.label"
                                    :value="item.label">
                            </el-option>
                        </el-select>
                        </li>
                        <li class="search-li">
                            <div class="icon"><input type="text"
                                                     placeholder="文章信息" class="search"
                                                     v-model="blogRequest.message">
                                <i class="el-icon-search" ></i>
                            </div>
                        </li>
                        <li>
                            <el-button icon="el-icon-refresh" @click="reset" circle></el-button>
                            <el-button icon="el-icon-search" @click="select" circle></el-button>
                            <el-button type="primary" icon="el-icon-edit" circle @click="toBlogEdit"></el-button>
                        </li>
                    </ul>
                    <ul class="paper">
                        <div class="item" v-for="(item,index) in blogs" :key="index" @click="toBlogDetailInfo(item.articleId)">
                            <el-row>
                                <el-col :span="6" v-show="item.articleCover">
                                    <div class="block" >
                                        <el-image
                                                style="width: 150px; height: 150px"
                                                :src="item.articleCover"
                                        ></el-image>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <h4>{{item.articleTitle}}</h4>
                                    <p class="name" style="margin-left: 20px;">{{item.articleDescription}}</p>
                                    <div class="info">
                                        <!--                        这里做标签页展示-->
                                        <i v-for="(tag,index) in item.tags" :key="index">
                                            <el-tag>{{tag}}</el-tag>
                                        </i>
                                    </div>
                                    <div>
                                        <i class="fa fa-thumbs-o-up" style="font-size: 14px;color: #88949b;margin-right: 10px"> 点赞</i>
                                        <i class="fa fa-commenting-o" style="font-size: 14px;color: #88949b;margin-right: 10px"> 回复</i>
                                        <i class="fa fa-edit" style="font-size: 14px;color: #88949b;margin-right: 10px"> {{item.userId}}</i>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </ul>
                    <div class="pagination">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="current"
                                :page-sizes="[10, 20, 40,100]"
                                :page-size="size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <GoTop></GoTop>
</div>


</template>

<script>

    import GoTop from "../../components/blog/GoTop";
    export default {
        name: "TeacherCourseDistribution",
        components: {GoTop},
        data() {
            return {
                hotBlogs:[],
                sortOptions: [],
                fits: ['contain',],
                blogs: [],
                blogRequest: {
                    message: '',
                    sort: '',
                },
                // 分页
                size: 6,
                current: 1,
                total: 10,
            }
        },
        created() {
            this.select();
            this.getHotArticle();
            this.initSortOptions();
        },
        methods: {
            getHotArticle(){
                this.getRequest('/articles/selectHotArticle').then(resp => {
                    if(resp){
                        this.hotBlogs = resp.data;
                    }
                })
            },
            changeSortValue(){
                console.log("调用条件--分区查询");
            },
            toBlogEdit(){
                this.$router.push({
                    path: "/common/CommonBlogEdit",
                });
            },
            toBlogDetailInfo(id) {
                // 进行页面跳转至ExcelManage页面
                // this.$router.replace('/teacher/TeacherDeriveExcelManage');
                if(window.sessionStorage.getItem('tokenStr')!=null){
                    this.$router.push({
                        path: "/common/CommonBlogDetail",
                        query: {id: id}
                    });
                }else{
                    this.$router.push({
                        path: "/commonBlogDetail",
                        query: {id: id}
                    });
                }

            },
            select() {
                this.postRequest('/articles/selectArticles/' + this.current + '/' + this.size, this.blogRequest).then(resp => {
                    if (resp) {
                        this.blogs = resp.data.records;
                        this.total = resp.data.total;
                    }
                })
            },
            initSortOptions(){
                this.getRequest('/sorts/selectSortOptions').then(resp=>{
                    if(resp){
                        this.sortOptions = resp;
                    }
                })
            },
            // 分页改变每页数量
            handleSizeChange(size) {
                this.size = size;
                this.select();
            },
            // 分页改变当前页数
            handleCurrentChange(current) {
                this.current = current;
                this.select();
            },
            reset() {
                this.blogRequest.message = '';
                this.blogRequest.sort = '';
                this.select();
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pagination {
        padding: 20px 0 30px 0;

        .el-pagination {
            display: flex;
            justify-content: center;
        }
    }

    .paper {
        h4 {
            cursor: pointer;
        }
    }

    .paper .item a {
        color: #000;
    }

    .wrapper .top .order {
        cursor: pointer;
    }

    .wrapper .top .order:hover {
        color: #0195ff;
        border-bottom: 2px solid #0195ff;
    }

    .wrapper .top .order:visited {
        color: #0195ff;
        border-bottom: 2px solid #0195ff;
    }

    .item .info i {
        margin-right: 5px;
        color: #0195ff;
    }

    .item .info span {
        margin-right: 14px;
    }

    .paper .item {
        width: 380px;
        border-radius: 4px;
        padding: 20px 30px;
        border: 1px solid #eee;
        box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
        transition: all 0.6s ease;
    }

    .paper .item:hover {
        box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
        transform: scale(1.03);
    }

    .paper .item .info {
        font-size: 14px;
        color: #88949b;
    }

    .paper .item .name {
        font-size: 14px;
        color: #88949b;
    }

    .paper * {
        margin: 20px 0;
    }

    .wrapper .paper {
        /*display: flex;*/
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .top .el-icon-search {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .top .icon {
        position: relative;
    }

    .wrapper .top {
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
    }

    #myExam .search-li {
        margin-left: auto;
    }

    .top .search-li {
        margin-left: auto;
    }

    .top li {
        display: flex;
        align-items: center;
    }

    .top .search {
        margin-left: auto;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #eee;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .top .search:hover {
        color: #0195ff;
        border-color: #0195ff;
    }

    .wrapper .top {
        display: flex;
    }

    .wrapper .top li {
        margin: 20px;
    }

    #myExam {
        width: 980px;
        margin: 0 auto;
    }

    #myExam .wrapper {
        background-color: #fff;
    }

    .paper .item[data-v-6b91abc7] {
        width: 800px;
        border-radius: 4px;
        padding: 0px 20px;
        border: 1px solid #eee;
    }

    .paper *[data-v-6b91abc7] {
        margin: 5px 0;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }

    .box-card[data-v-6b91abc7] {
        width: 200px;
    }
</style>
